import React, { Component } from 'react'
import PropTypes from 'prop-types'

// props基本使用 - props限制
export class Person extends Component {
  // 类式组件中的构造器与props
  /*
    构造器完全可以省略, 但是一旦写了构造器, 则一定要写super
    否则: 在构造器中无法通过this.props访问props!!
  */
  constructor(props) {
    super(props)
    console.log('constructor', this.props)
  }

  render() {
    // props是只读的
    const { name, age, sex } = this.props
    return (
      <div>
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{age + 1}</li>
          <li>年龄：{sex}</li>
        </ul>
      </div>
    )
  }
}
// 限制props
Person.propTypes = {
  // 必传且为字符串
  name: PropTypes.string.isRequired,
  sex: PropTypes.string,
  age: PropTypes.number,
  // 限制为函数
  speak: PropTypes.func
}
Person.defaultProps = {
  sex: '不男不女',
  // 默认
  age: 18
}

// props简写方式
export class EasyPerson extends Component {
  static propTypes = {
    // 必传且为字符串
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number,
    // 限制为函数
    speak: PropTypes.func
  }
  static defaultProps = {
    sex: '不男不女',
    // 默认
    age: 18
  }

  render() {
    // props是只读的
    const { name, age, sex } = this.props
    return (
      <div>
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{age + 1}</li>
          <li>年龄：{sex}</li>
        </ul>
      </div>
    )
  }
}

// 函数式组件使用props
export function FuncPerson(props) {
  const { name, age, sex } = props
  return (
    <div>
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{age + 1}</li>
        <li>年龄：{sex}</li>
      </ul>
    </div>
  )
}
// 限制props
FuncPerson.propTypes = {
  // 必传且为字符串
  name: PropTypes.string.isRequired,
  sex: PropTypes.string,
  age: PropTypes.number,
  // 限制为函数
  speak: PropTypes.func
}
FuncPerson.defaultProps = {
  sex: '不男不女',
  // 默认
  age: 18
}

